<template>
  <div class="nourish">
    <Headers :graphic="graphic" />
    <div class="banner">
      <div class="information">
        <div class="title">培养信息</div>
        <div class="title-bom"></div>
        <div class="more">
          换一批
          <i class="el-icon-refresh"></i>
        </div>
        <div class="card">
          <div class="card-item" v-for="item in 4" :key="item">
            <div class="tit">
              公告|研究生院赴天津大学商讨深化联合培养研究生工作
            </div>
            <div class="text">
              为深入推进我院与天津大学联合培养研究生工作，2018年11…
            </div>
            <div class="icons">
              <img src="@/assets/icons/right-more.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="plan">
        <div class="title" style="text-align: center">培养方案</div>
        <div class="title-bom" style="margin: 0 auto 40px"></div>
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item v-for="item in 6" :key="item">
            <div class="card-item">
              <img src="@/assets/imgs/card_item.png" alt="" />
              <div class="word">研究院、部名称</div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="manage">
        <div class="title">教学管理</div>
        <div class="title-bom"></div>
        <div class="card">
          <div class="card-item" v-for="item in 4" :key="item">
            公告|研究生院赴天津大学商讨深化联合培养研究生工作
          </div>
        </div>
        <div class="item-more">更多内容>>></div>
      </div>
      <div class="activity">
        <div class="title">实践活动</div>
        <div class="title-bom"></div>
        <div class="more">更多>></div>
        <div class="work-graphic">
          <div class="graphic-item" v-for="item in 3" :key="item">
            <div class="item-img">
              <img src="@/assets/imgs/item-img.jpg" alt="" />
            </div>
            <div class="item-text">
              <div class="">研究生教育创新工作成果展示标题</div>
              <div class="">
                <span>标签文字</span>
                <span>标签文字</span>
              </div>
              <div class="color-b21315">
                <i class="iconfont icon-shijian color-b21315"></i>
                2020年10月19日
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="research">
        <div class="title">教学研究</div>
        <div class="title-bom"></div>
        <div class="more">更多>></div>
        <div class="card">
          <div class="card-item" v-for="item in 9" :key="item">
            <div class="tit">教学研究内容标题</div>
            <div class="word">作者：戴用名</div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="title">质量督导</div>
        <div class="title-bom"></div>
        <div class="more">更多>></div>
        <div class="card">
          <div class="card-item" v-for="item in 4" :key="item">
            <div class="item-left">
              <img src="@/assets/imgs/poo.jpg" alt="" />
            </div>
            <div class="item-right">
              <div class="tit">秦伯益院士畅谈读书与人生</div>
              <div class="article">
                军事科学院研究生院举办第405期“红山博学讲坛”，邀请原军事医学科学院院长、中国工程院院士秦伯益研究员
              </div>
              <div class="data">2021.10.28</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Bottom />
  </div>
</template>

<script>
import Headers from "@/components/headers.vue";
import Bottom from "@/components/bottom.vue";
export default {
  name: "nourish",
  components: {
    Headers,
    Bottom
  },
  name: "",
  data() {
    return {
      graphic: {
        title: "培养工作",
        imgherf:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pptjia.com%2Fimage%2F20180711%2F19cefce1d6658468b128e08768ed6f40.JPG&refer=http%3A%2F%2Fimg.pptjia.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638923507&t=e6b513c1d3126c9a642678038dbf69cf",
        text:
          "一张张录取通知书见证着广大学子努力拼搏的涔涔汗水跨越山海，共赴理想“研”途有你，未来可期！"
      }
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.title {
  font-weight: 700;
  color: #333333;
  font-size: 48px;
  margin-bottom: 15px;
}
.title-bom {
  width: 111px;
  height: 8px;
  background-color: #b21315;
  border-radius: 8px;
  margin-bottom: 40px;
}
.information {
  height: 570px;
  padding: 95px 330px;
  .more {
    text-align: right;
    color: #b21315;
    font-size: 16px;
    // padding-right: 50px;
    margin-bottom: 15px;
    font-weight: 700;
    i {
      font-size: 18px;
    }
  }
  .card {
    display: flex;
    justify-content: space-between;
    .card-item {
      width: 300px;
      height: 267px;
      background-color: #b21315;
      padding: 34px 25px 0;
      .tit {
        font-weight: 700;
        color: #ffffff;
        font-size: 20px;
        line-height: 30px;
      }
      .text {
        font-weight: 700;
        color: #ffffff;
        font-size: 16px;
        margin-top: 40px;
        line-height: 30px;
      }
      .icons {
        width: 80px;
        height: 50px;
        margin-left: 180px;
        margin-top: 20px;
      }
    }
  }
}
.plan {
  height: 645px;
  padding: 95px 170px 0;
  background-color: #f4f4f4;
  .card-item {
    width: 100%;
    height: 100%;
    position: relative;
    .word {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 95px;
      background: linear-gradient(transparent, #000);
      font-weight: 700;
      color: #ffffff;
      font-size: 18px;
      padding-top: 56px;
      padding-right: 25px;
      text-align: right;
    }
  }
}
.manage {
  padding: 95px 330px;
  .card {
    display: flex;
    justify-content: space-between;
    margin-bottom: 70px;
    .card-item {
      padding: 34px 25px 0;
      background-color: #b21315;
      width: 300px;
      height: 184px;
      font-weight: 700;
      color: #ffffff;
      font-size: 20px;
      line-height: 30px;
    }
  }
  .item-more {
    margin: 0 auto;
    width: 276px;
    height: 48px;
    background-color: #ffffff;
    border: 2px solid;
    border-color: #b21315;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    color: #b21315;
    font-size: 24px;
    text-align: center;
    line-height: 48px;
  }
}
.activity {
  padding: 95px 170px;
  .more {
    text-align: right;
    color: #b21315;
    font-size: 16px;
    padding-right: 50px;
    font-weight: 700;
  }
  .work-graphic {
    display: flex;
    justify-content: space-evenly;
    // padding: 0 170px;
    margin-top: 15px;
    position: relative;
    .graphic-item {
      width: 460px;
      height: 460px;
      .item-img {
        width: 100%;
        height: 310px;
      }
      .item-text > div:nth-child(1) {
        font-weight: 700;
        color: #333333;
        font-size: 22px;
      }
      .item-text > div:nth-child(2) {
        margin: 10px 0 20px;
      }
      .item-text > div:nth-child(2) span {
        display: inline-block;
        line-height: 24px;
        width: 88px;
        height: 24px;
        background-color: rgba(178, 19, 21, 0.27);
        border: 1px solid #b21315;
        border-radius: 5px;
        color: #b21315;
        font-size: 14px;
        text-align: center;
        margin-right: 5px;
      }
      .item-text > div:nth-child(3) {
        color: #b21315;
        font-size: 18px;
      }
      .item-text > div:nth-child(3) i {
        color: #b21315;
        font-size: 18px;
      }
    }
  }
}
.research {
  padding: 95px 330px;
  background-color: #f4f4f4;
  .more {
    text-align: right;
    color: #b21315;
    font-size: 16px;
    padding-right: 50px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .card {
    display: flex;
    flex-wrap: wrap;
    .card-item:nth-child(1) {
      border-left: 4px solid #b21315;
    }
    .card-item:nth-child(1) .tit:nth-child(1) {
      color: #b21315;
    }

    .card-item {
      width: 33%;
      height: 50px;
      margin-bottom: 32px;
      border-left: 4px solid #999999;
      padding-left: 13px;
      .tit {
        font-weight: 700;
        font-size: 22px;
        // margin-bottom: 10px;
      }

      .red-tit {
        color: #b21315;
      }
      .word {
        font-weight: 700;
        color: #999999;
        font-size: 14px;
      }
    }
  }
}
.content {
  padding: 95px 170px 200px;
  .more {
    font-weight: 700;
    color: #b21315;
    font-size: 18px;
    text-align: right;
    margin-bottom: 10px;
  }
  .card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .card-item {
      display: flex;
      width: 49%;
      margin-bottom: 15px;
      height: 200px;
      border-radius: 5px;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      .item-left {
        margin-right: 20px;
        text-align: center;
        width: 290px;
        height: 200px;
        background-color: rgba(#b21315, 0.3);
        border-radius: 5px;
      }
      .item-right {
        width: 446px;
        .tit {
          font-weight: 700;
          color: #333333;
          font-size: 20px;
          margin-bottom: 15px;
          margin-top: 40px;
        }
        .article {
          color: #666666;
          font-size: 16px;
          height: 70px;
        }
        .data {
          color: #666666;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
